<script setup>
import {inject, onMounted, ref, shallowRef} from "vue";
import expertList from '@/views/content/expert/expertList.vue'
import { getColumnByCode } from '@/api/column.js'
const getAssetsFile = inject("getAssetsFile")

import emitter from "@/utils/mitt.js";
const changePath = (path, query = null) => {
	emitter.emit('changePath', {
		path: path,
		query: query
	})
}

const cover = ref(null)
const getData = async () => {
	const res = await getColumnByCode({code: 'manage'})
	if(res.data.code === 200) {
		const { coverFiles } = res.data.data
		cover.value = coverFiles?.length ? coverFiles[0]?.accessUrl : null
	}
}

onMounted(()=>{
	getData()
})
</script>

<template>
	<div class="pageTitle">
		<expert-list :show-alone="false"></expert-list>
		<n-space align="center" justify="space-between" style="margin-bottom: 20px">
			<n-h6 class="pageTitle" prefix="bar">
				<div>管理办法</div>
			</n-h6>
			<n-button
				text
				:color="'#999'"
				@click="changePath('/index/expert/expertList')"
			>
				查看更多>>
			</n-button>
		</n-space>
		<n-divider class="pageDivider"></n-divider>
		<div class="file-box">
			<n-image
				width="100%"
				class="cover"
				:src="cover"
				object-fit="cover"
				preview-disabled
			/>
			<div class="view-btn" @click="changePath('/index/expert/expertManagement')">查看全部</div>
		</div>
	</div>
</template>

<style scoped>
	.file-box{
		width: 280px;
		height: 280px;
		position: relative;
	}
	.cover{
		width: 100%;
		height: 100%;
	}
	.view-btn{
		width: 90px;
		height: 30px;
		display: flex;
		font-weight: normal;
		font-size: 15px;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #ffffff;
		background-color: gray;
		position: absolute;
		right: 30px;
		bottom: 30px;
	}
</style>
